<template>
  <div class="remoteMeeting-container">
    <page-header
      type="remoteMeeting"
      @reset="resetSeach"
      @searchChange="searchData"
    />
    <pagination-table
      ref="ptable"
      :tableData="pageData.listData"
      @pagination="paginaChange"
    >
      <XMTableColumn label="患者姓名" prop="name">
        <template #default="scope">
          {{ scope.row.patientDto && scope.row.patientDto.name }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="患者性别" prop="sex">
        <template #default="scope">
          {{
            scope.row.patientDto && scope.row.patientDto.sex === 1 ? '男' : '女'
          }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="出生日期" prop="age">
        <template #default="scope">
          {{ scope.row.patientDto && scope.row.patientDto.birthday }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="手机号" prop="phone">
        <template #default="scope">
          {{ scope.row.patientDto && scope.row.patientDto.phone }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="申请时间" prop="createTime">
        <template #default="scope">
          {{ renderTime(scope.row.createTime) }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="状态" prop="status">
        <template #default="scope">
          {{
            scope.row.status !== 1
              ? scope.row.status === 2
                ? '同意'
                : '拒绝'
              : '暂未处理'
          }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="问诊时间" prop="remoteTime">
        <template #default="scope">
          {{
            scope.row.remoteTime ? renderTime(scope.row.remoteTime) : '暂未处理'
          }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="回复内容" min-width="250" prop="replyContent">
        <template #default="scope">
          <div style="text-align: left" v-html="scope.row.replyContent"></div>
        </template>
      </XMTableColumn>
      <XMTableColumn label="备注" prop="remark"></XMTableColumn>
      <XMTableColumn label="操作" min-width="160">
        <template #default="scope">
          <span v-if="scope.row.status !== 1">已处理</span>
          <template v-else>
            <el-button
              size="small"
              type="primary"
              @click="showDialog(scope.row, 'agree')"
            >
              同意
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="showDialog(scope.row, 'refuse')"
            >
              拒绝
            </el-button>
          </template>
        </template>
      </XMTableColumn>
    </pagination-table>
    <meeting-dialog
      v-model:isVisble="isVisble"
      :id="showID"
      :type="dialogType"
      @toUpdate="toUpdate"
    ></meeting-dialog>
  </div>
</template>
<script setup>
  import { reactive, ref } from 'vue'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated.js'
  import { useRoute } from 'vue-router'
  import moment from 'moment'
  import { loadRemoteMeetingPage } from '@/api/modules/remoteMeeting.js'
  import meetingDialog from '../components/meetingDialog'
  import filter from '@/hooks/filter'
  const pageData = reactive({
    listData: [],
    search: { pageIndex: 1, pageSize: 5 },
  })

  const ptable = ref(null)
  function resetSeach() {
    // showDialog({}, 'refuse')
    pageData.search = { pageIndex: 1, pageSize: 5 }
    ptable.value.clearData()
    loadData()
  }
  function searchData(params) {
    pageData.search.name = params.value1
    pageData.search.startDay = params.value2.start
      ? moment(params.value2.start).format('YYYY-MM-DD')
      : null
    pageData.search.endDay = params.value2.end
      ? moment(params.value2.end).format('YYYY-MM-DD')
      : null
    pageData.search.status = params.value3
    pageData.search.ptNo = params.value4
    pageData.search.remoteStartTime = params.value5.start
      ? moment(params.value5.start).format('YYYY-MM-DD HH:mm:ss')
      : null
    pageData.search.remoteEndTime = params.value5.end
      ? moment(params.value5.end).format('YYYY-MM-DD HH:mm:ss')
      : null
    loadData(pageData.search)
  }
  function paginaChange(params) {
    pageData.search.pageIndex = params.current
    pageData.search.pageSize = params.pageSize
    pageData.search.orderType = params.orderType
    loadData(pageData.search)
  }

  const route = useRoute()
  const loadData = async () => {
    pageData.listData = await loadRemoteMeetingPage({ ...pageData.search })
  }

  const isVisble = ref(false)
  const dialogType = ref('agree')
  const showID = ref(null)
  const showDialog = (item, type) => {
    isVisble.value = true
    dialogType.value = type
    showID.value = item.id
  }
  const toUpdate = () => {
    loadData()
  }
  onMountedOrActivated(() => {
    loadData()
  })
  const { renderTime } = filter()
</script>
<style lang="scss" scoped>
  .remoteMeeting-container {
    margin: 32px;
    background-color: white;
  }
</style>
